<template>
  <div class="container">
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 80%; height: 98%;"
        v-loading="loading"
       
        fit
        height="750"
      >
        <el-table-column prop="Id" label="序号" width="70"> </el-table-column>
        <el-table-column prop="name" label="使用单位"></el-table-column>
        <el-table-column prop="liftNumber" label="起重机数量">
          <template slot-scope="scope">
            <el-button
              type="text"
              style="text-decoration: underline;"
              @click="showEquList(scope.row.name, scope.row.liftNumber)"
              >{{ scope.row.liftNumber }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" width="180.5">
        </el-table-column>
        <el-table-column prop="contacts" label="联系人" width="180.5">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" widtFh="180.5">
        </el-table-column>
      </el-table>
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        :append-to-body="true"
        width="60%"
      >
        <el-table
          :data="equList"
        >
          <el-table-column prop="Id" label="序号" width="70"> </el-table-column>
          <el-table-column prop="f013" label="设备品种"></el-table-column>
          <el-table-column prop="f037" label="企业编号"> </el-table-column>
          <el-table-column prop="f015" label="规格型号"> </el-table-column>
          <el-table-column prop="f104" label="额定起重量" width="120">
          </el-table-column>
          <el-table-column prop="userYear" label="使用年限"> </el-table-column>
          <el-table-column prop="f099" label="工作级别"> </el-table-column>
          <el-table-column prop="f093" label="起升高度"> </el-table-column>
          <el-table-column prop="checkDate" label="上次检验日期" width="120">
          </el-table-column>
          <el-table-column prop="checkResult" label="上次检验结果" width="120">
          </el-table-column>
          <el-table-column label="上次检验报告" width="120"> </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="equPageSizeChange"
          @current-change="equPageChange"
          :current-page="equCurrentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="equPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="equTotal"
          style="margin-top: 10px"
        >
        </el-pagination>
        <span slot="footer" class="dialog-footer"> </span>
      </el-dialog>
    </div>
    <div class="page">
      <el-pagination
        background
        @size-change="pageSizeChange"
        @current-change="pageChange"
        :current-page="currentPage"
        :page-sizes="[15, 30, 50, 80]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { req } from "@/api/base/BaseApi";
export default {
  created() {
    this.searchList();
  },
  data() {
    return {
      tableData: [], // 表格数据
      total: 0, // 表格数据总项数
      loading: false, // 表格是否在加载
      pageSize: 30, // 默认一页15项数据
      currentPage: 1,
      dialogVisible: false, // 是否显示对话框
      dialogTitle: "", // 对话框的标题，显示使用单位名称
      equUser: "", // 设备的使用单位
      equList: [], // 某个使用单位的起重机列表
      equTotal: 0, // 表格数据总项数
      equPageSize: 10,
      equCurrentPage: 1,
    };
  },
  props: {
    checkUnit: String,
  },
  methods: {
    // 获取数据
    async searchList() {
      const { data } = await req("/lifting-service/info/userinfo", "GET", {
        inspection: this.checkUnit,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
      const { list, total } = data;
      this.generateIds(list);
      this.tableData = list;
      this.total = total;
    },
    // 页面大小改变
    async pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.currentPage = 1;
      // 获取数据
      this.searchList();
    },
    // 页数改变
    async pageChange(page) {
      this.currentPage = page;
      // 获取数据
      this.searchList();
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      console.log("调用行样式");
      return {
        background: "#06134A",
        color: "#72C22D",
      };
    },
    // 根据页面生成数据的ID
    generateIds(list) {
      for (const index in list) {
        list[index].Id = +index + 1 + this.pageSize * (this.currentPage - 1);
      }
    },
    generateEquIds(list) {
      for (const index in list) {
        list[index].Id =
          +index + 1 + this.equPageSize * (this.equCurrentPage - 1);
      }
    },
    // 通过使用单位名称获取设备列表
    showEquList(name, total) {
      this.dialogTitle = name;
      this.equTotal = total;
      // 获取起重机列表
      this.equUser = name;
      this.searchEquList(total);
      this.dialogVisible = true;
    },
    // 获取数据
    async searchEquList() {
      const { data } = await req("/lifting-service/info/liftinginfo", "GET", {
        user: this.equUser,
        pageNum: this.equCurrentPage,
        pageSize: this.equPageSize,
      });
      let { list, total } = data;
      list = list.slice(0, this.equTotal);
      this.generateEquIds(list);
      this.equList = list;
    },
    // 页面大小改变
    async equPageSizeChange(pageSize) {
      this.equPageSize = pageSize;
      this.equCurrentPage = 1;
      // 获取数据
      this.searchEquList();
    },
    // 页数改变
    async equPageChange(page) {
      this.equCurrentPage = page;
      // 获取数据
      this.searchEquList();
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
}
.allbody {
  // background-image: url("../../../../../assets/bg.jpg");
}
</style>